.login {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  padding: 80px;
  width: 100%;
  height: 100%;
  justify-content: center;
  background-color: #edf0f599;
  overflow: hidden;

  &::before, &::after{
    content: "";
    position: absolute;
    z-index: 9;
  }

  &::before {
    width: 800px;
    height: 800px;
    right: -400px;
    top: -400px;
    background: radial-gradient(50% 50% at 50% 50%, #126bff 0, rgba(253, 216, 53, 0) 100%);
    opacity: 0.1;
  }

  &::after {
    width: 1280px;
    height: 1280px;
    left: -640px;
    bottom: -640px;
    background: radial-gradient(50% 50% at 50% 50%, #126bff 0, rgba(18, 107, 255, 0) 100%);
    opacity: 0.1;
  }

  .content {
    margin: 0 auto;
    position: relative;
    width: 100%;
    z-index: 10;
    .body {
      position: absolute;
      width: 400px;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      :global(.t-tabs__nav-scroll) {
        justify-content: center;
      }
      :global(.t-card__footer-wrapper) {
        text-align: center;
      }
    }
    
  }
}

.login-box {
  height: 314px;
  margin-top: 16px;
  padding: 20px;
  &.login-box-center{
    text-align: center;
  }
}

.bind-content{
  .login-box{
    margin-top: 0;
  }
}

.associate-items {
  .item {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    transition: all 0.3s;
    &:hover,
    &.active {
      border: 1px solid #00a4ff;
      background-color: #f7f8fa;
    }
  }
}

.hidden {
  display: none;
}

.footer {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 20px;
  text-align: center;
}